<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>job_edit</title>
<link href="libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="libs/fontawesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/layer/dist/layer.js"></script>


<!-- CodeMirror includes -->
<link rel="stylesheet" href="libs/codemirror/lib/codemirror.css">
<script src="libs/codemirror/lib/codemirror.js"></script>
<script src="libs/codemirror/mode/properties/properties.js"></script>
<script src="libs/codemirror/mode/sql/sql.js"></script>
<script src="libs/codemirror/addon/selection/active-line.js"></script>
<script src="libs/codemirror/addon/edit/matchbrackets.js"></script>

<!-- AngularJS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-animate/angular-animate.min.js"></script>
<script src="libs/angular-sanitize/angular-sanitize.min.js"></script>

<style>
    body {margin: 10px 50px; font-size: 16px;}
    h2 {border-bottom: 1px solid #ccc;height: 50px;text-align: center;}
    .fa-trash {cursor: pointer}
    .col-md-1 {width: 5%}
    #fileList {margin: 5px 10px;height: 260px;overflow-y: scroll;}
    .file_row {width: 450px;height: 20px;overflow: hidden;}
    .file_name {margin: 10px;}
    .CodeMirror {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        width: 100%;
        height: 500px;
        font-size:15px;
    }
</style>

<body>
<h2>StreamSql</h2>
<div >
    <form class="form-horizontal" enctype="multipart/form-data">
        <input class="form-control" rows="1" name="type" style="display: none" value="add"/>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">jobId：</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="1" name="jobId"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Query：</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="23" name="query" id="query"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2"></div>
            <div class="col-sm-4" style="font-size: 20px;">
                <i class="fa fa-folder" onclick="openUploadFilesLayer();"></i>
                <i class="fa fa-cog" id="setting" onclick="openConfigSetLayer();"></i>
            </div>
            <div class="col-sm-2">
                <button id="submit" type="button" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='./index.html'">Cancel</button>
            </div>
        </div>
        <div id="upload-files" style="display: none">
            <input type="file" name="file" multiple="multiple" style="display: none"/>
            <div id="fileList"></div>
            <div style="text-align: right;margin-right: 10px;border-top: 1px solid #e5e5e5;padding-top:5px;">
                <button type="button" class="btn btn-primary" onclick="$('input[name=file]').click();">Select</button>
                <button type="button" class="btn btn-primary" onclick="layer.close(UploadFilesLayer);">Yes</button>
            </div>
        </div>
        <div id="config-set" style="display: none">
            <div><textarea style="width: 100%;height: 265px;" name="config" id="config"></textarea></div>
            <div style="text-align: right;margin-right: 10px;">
                <button type="button" class="btn btn-primary" onclick="layer.close(ConfigSetLayer);">Yes</button>
            </div>
        </div>
    </form>

    <div>
        <pre class="alert alert-error" id="error_message" style="display: none; color:Red; "></pre>
    </div>
</div>
</body>

<script type="text/javascript" src="./js/stream_sql.js"></script>
<script>
window.onload = function () {
    CodeMirror.fromTextArea(document.getElementById("query"), {
        mode: 'text/x-sql',
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true
    }).on('change', editor => {
        document.getElementById('query').value = editor.getValue();
        console.log('change up value:'+ editor.getValue());
    });
};

</script>
</html>